<template>
    <div>
        <Table :columns="columns" :data="data1" class="table" stripe ref="myTable">
            <template v-slot:operate="row">
                <Button type="info" size="small" :to="{path: '/bs/user/userEdit', query: {userId: row.id} }"
                        style="margin-right: 5px" v-has="vm.$res.userGetOne">详情
                </Button>
            </template>
        </Table>
        <div style="text-align: right;margin: 5px">
            <Page :total="total" @on-change="pageChange" @on-page-size-change="sizeChange" show-elevator show-sizer
                  show-total
                  :page-size="pageSize"
                  size="small"/>
        </div>
    </div>
</template>

<script>
    export default {
        name: "userList",
        metaInfo: {
            title: '用户列表',
        },
        data() {
            return {
                columns: [
                    {title: '账号', key: 'username', align: 'center'},
                    {title: '姓名', key: 'name', align: 'center'},
                    {title: '手机号', key: 'phone', align: 'center'},
                    {title: '入职时间', key: 'entryTime', align: 'center'},
                    {title: '婚姻状态', key: 'marriage', align: 'center'},
                    {
                        title: '状态', key: 'status', align: 'center', render: (h, params) => {
                            return h("span", this.statusHandle(params.row.status))

                        }
                    },
                    {
                        title: '操作', key: 'operate', width: "100", align: 'center', render: (h, params) => {
                            return h('div', this.$refs.myTable.$scopedSlots.operate(params.row))
                        }
                    },
                ],
                // 用户数据
                data1: [],
                // 分页相关
                total: 0, // 总数据大小
                pageSize: 10, // 页码大小
                page: 1,
                vm: this,
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            // 修改当前页码
            pageChange: function (val) {
                this.page = val
                this.getData()
            },
            // 修改页码大小
            sizeChange: function (val) {
                this.pageSize = val
                this.getData()
            },
            // 获取数据
            getData: function () {
                this.$kit.ajaxGet(this.$res.userInfoList, {page: this.page, size: this.pageSize}, (res) => {
                    this.data1 = res.data.data.data
                    this.total = res.data.data.totalSize
                }, this)
            },
            // 用户状态处理
            statusHandle(status) {
                if (status === 0) {
                    return "在职";
                } else if (status === 1) {
                    return "离职"
                } else {
                    return "其他";
                }
            }


        }
    }
</script>

<style scoped>

</style>
